<template>
  <div id="rank-page">
<!--    <div class="my-bg"></div>-->
    <div class="my-body">
      <div class="content">
<!--        <nav class="rankList-nav" ref="change">-->
<!--          <span :class="{isActive: toggle === 'Songs'}" @click="handleChangeView('Songs', 0)">歌曲</span>-->
<!--          <span :class="{isActive: toggle === 'SongLists'}" @click="handleChangeView('SongLists', 1)">歌单</span>-->
<!--        </nav>-->
        <div class="tab_rank">
          <v-tabs slider-color="black" fixed-tabs>
            <v-tab v-for="rank in rankMsg" :key="rank.type" @click="handleChangeRank(rank.type)">
              <svg-icon :icon-class="rank.icon" size="26"></svg-icon>
              <span>{{rank.name}}</span>
            </v-tab>
          </v-tabs>
        </div>
        <component :is="currentView"></component>
      </div>
    </div>
  </div>
</template>

<script>
import rankSongs from '../components/RankSongs'
import { mapGetters } from 'vuex'
import {mixin} from '../mixins'
import axios from 'axios'

export default {
  name: 'rank-page',
  data () {
    return {
      toggle: 'Songs',
      currentView: 'rankSongs',
      rankMsg: [
        {
          type:1,
          name:'飙升榜',
          icon: 'huo'
        },
        {
          type:2,
          name:'人气榜',
          icon:'huangguan'
        },
        {
          type:3,
          name:'收藏榜',
          icon:'shoucang'
        }
      ],
    }
  },
  components: {
    rankSongs,
  },
  computed: {
    ...mapGetters([
      'listOfSongs'
    ])
  },
  watch: {
  },
  mixins: [mixin],
  methods: {
    // 根据type的值，切换排行榜
    // 飙升榜根据三天的总播放次数排序
    // 人气榜根据播放次数最多的来排序
    // 收藏榜根据收藏次数最多的排序
    handleChangeRank: function (type) {
      axios.get(this.$store.state.HOST + '/song/of/rank?type='+type).then(resp => {
        this.$store.commit('setListOfSongs', resp.data)
        window.sessionStorage.setItem('listOfSongs', JSON.stringify(resp.data))
      })
    }
  }
}
</script>

<style scoped>

  .tab_rank span{
    font-size: 1.4em;
    font-weight: 600;
  }
  .my-body{
    position: relative;
    padding: 0 100px;
  }
  .content {
    background-color: white;
    margin: 50px 0;
    border-radius: 12px;
    padding: 20px 40px;
    min-width: 900px;
  }
  .rankList-nav {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
    font-size: 1.5rem;
    color: black;
  }
  .rankList-nav span {
    line-height: 50px;
  }
  .isActive {
    font-weight: 600;
    border-bottom:5px solid black;
  }
</style>
